<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const $route = useRoute()
const $router = useRouter()

const active = ref($route.meta.active || $route.path)

const changeTab = (tab) => {
  $router.replace(tab)
}

onMounted(() => {
  active.value = $route.meta.active || $route.path
})
</script>

<template>
  <van-tabbar v-model="active" @change="changeTab" active-color="#134BBB" inactive-color="rgba(0, 0, 0, 0.45)" style="border-top: 1px solid #e5e6eb">
    <van-tabbar-item name="/ip">
      <template #icon="props">
        <img v-if="props.active" class="icon" src="@/assets/img/icon_sc_s.png" />
        <img v-else class="icon" src="@/assets/img/icon_sc_n.png" />
      </template>
      <span class="label">素材中心</span>
    </van-tabbar-item>
    <van-tabbar-item icon="user-o" name="/ip/videos">
      <template #icon="props">
        <img v-if="props.active" class="icon" src="@/assets/img/icon_sp_s.png" />
        <img v-else class="icon" src="@/assets/img/icon_sp_n.png" />
      </template>
      <span class="label">我的视频</span>
    </van-tabbar-item>
  </van-tabbar>
</template>

<style lang="scss" scoped>
.view {
  height: 100vh;
  overflow: auto;
  padding-bottom: 15vw;
}

.label {
  font-family: PingFangSC-Regular;
  font-size: 2.6vw;
  letter-spacing: 0;
  font-weight: 400;
  margin-top: 1vw;
}

.icon {
  width: 4vw;
  height: auto;
}
</style>
